<template>
  <div class="detail">
    <MainLayout>
      <template #header>
        <div class="flex_block header_modal" @click="handleBack">
          <el-icon class="title icon"><ArrowLeftBold /></el-icon>
          <div class="title">用例详情</div>
        </div>
      </template>
      <template #main>
        <div class="tags_modal" v-loading="loading">
          <el-tabs v-model="active_tags" class="demo-tabs">
            <el-tab-pane label="基本信息" name="1">
              <div class="grid_container">
                <div class="grid-item">
                  <div class="flex_block">
                    <div class="text_left">用例名：</div>
                    <div>{{ tags_info.name || "" }}</div>
                  </div>
                </div>
                <div class="grid-item">
                  <div class="flex_block">
                    <div class="text_left">测试类型：</div>
                    <div>{{ tags_info.story || "" }}</div>
                  </div>
                </div>
                <div class="grid-item">
                  <div class="flex_block">
                    <div class="text_left">测试场景：</div>
                    <div>{{ tags_info.scene || "" }}</div>
                  </div>
                </div>
                <div class="grid-item">
                  <div class="flex_block">
                    <div class="text_left">优先级：</div>
                    <div>{{ tags_info.severity || "" }}</div>
                  </div>
                </div>
                <div class="full-row">
                  <div class="flex_block">
                    <div class="text_left">描述：</div>
                    <div>{{ tags_info.description || "" }}</div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="测试步骤" name="2">
              <el-table
                :data="step_list"
                border
                :style="{ height: 'calc(100vh - 250px)' }"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="100"
                  align="center"
                />
                <el-table-column prop="value" label="步骤" align="center" />
              </el-table>
            </el-tab-pane>
            <el-tab-pane
              label="测试脚本"
              name="3"
              v-if="store.getters.showAdmin"
            >
              <div class="script_block">
                <Codemirror
                  :value="code_info"
                  :height="'calc(100vh - 260px)'"
                  :key="code_info"
                  :readOnly="true"
                ></Codemirror>
              </div>
            </el-tab-pane>
            <el-tab-pane
              label="测试数据"
              name="4"
              v-if="store.getters.showAdmin"
            >
              <el-table
                :data="tags_info.dataList"
                border
                :style="{ height: 'calc(100vh - 250px)' }"
                v-loading="table_loading"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="100"
                  align="center"
                />
                <el-table-column prop="name" label="测试数据" align="center">
                  <template #default="{ row }">
                    <span class="text_name" @click="handleTestDataName(row)">{{
                      row.name
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="isDefault"
                  label="是否默认"
                  min-width="130"
                  align="center"
                >
                  <template #default="{ row }">
                    <el-switch
                      @change="handleDefaultTestData(row)"
                      v-model="row.isDefault"
                      active-value="1"
                      inactive-value="0"
                      size="small"
                    />
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="测试历史" name="5">
              <el-table
                :data="tags_info.exampleRecordList"
                border
                :style="{ height: 'calc(100vh - 250px)' }"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="100"
                  align="center"
                />

                <el-table-column prop="name" label="用例名称" align="center" />
                <el-table-column
                  prop="recordTime"
                  label="发起时间"
                  align="center"
                >
                  <template #default="{ row }">
                    {{ iso8601ToTime(row.recordTime) }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="operatorName"
                  label="操作人姓名"
                  align="center"
                />
                <!-- <el-table-column
                  prop="exampleResult"
                  label="用例状态"
                  align="center"
                >
                  <template #default="{ row }">
                    <div>
                      {{ handleTestResultLabel(row.exampleResult) || "/" }}
                    </div>
                  </template>
                </el-table-column> -->
                <el-table-column
                  prop="recordStatus"
                  label="记录状态"
                  align="center"
                >
                  <template #default="{ row }">
                    <div>
                      {{ handleTestStateLabel(row.recordStatus) || "/" }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="recordResult"
                  label="记录结果"
                  align="center"
                >
                  <template #default="{ row }">
                    <div>
                      {{ handleSaseResultLabel(row.recordResult) || "/" }}
                    </div>
                  </template>
                </el-table-column>

                <el-table-column label="操作" width="80" align="center">
                  <template #default="{ row }">
                    <div class="column_operate_block">
                      <div
                        @click="handleTicketsData(row)"
                        class="color_primary cursor_pointer"
                      >
                        日志
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>
    </MainLayout>

    <el-dialog
      v-model="isShowDialog"
      :title="dialogText"
      width="800"
      :before-close="handleDialogClose"
      :close-on-click-modal="false"
    >
      <div class="dialog_main">
        <Codemirror
          :value="consoleLog"
          :height="'98%'"
          :readOnly="true"
        ></Codemirror>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import {
  ObtainCaseDetail,
  UpdateCaseDefault,
  GetTestDetailReport,
} from "@/api/test_case";
import { iso8601ToTime } from "@/utils/index";
import {
  handleTestStateLabel,
  handleTestResultLabel,
  handleSaseResultLabel,
} from "@/api/common";
import { useStore } from "vuex";
const store = useStore();

const route = useRoute();
const router = useRouter();

const loading = ref(false);
const active_tags = ref(null);
const tags_info = ref({});
const step_list = ref([]);
const code_info = ref(null);
const table_loading = ref(false);
const isShowDialog = ref(false);
const consoleLog = ref(null);
const dialogText = ref("用例日志");

onMounted(() => {
  handleDetailTestData("one");
  console.log("isShowAdmin", store.getters.showAdmin);
});
// 点击 测试数据的 默认文件 的 开关
const handleDefaultTestData = (item) => {
  console.log("item", item);
  const obj = {
    isDefault: item.isDefault,
    exampleId: route.query.id,
    dataId: item.id,
  };
  table_loading.value = true;
  UpdateCaseDefault(obj)
    .then((res) => {
      ElMessage.success("设置成功");
      handleDetailTestData();
    })
    .finally(() => {
      table_loading.value = false;
    });
};
const handleDetailTestData = (type) => {
  loading.value = true;
  if (type === "one") {
    active_tags.value = "1";
  }
  ObtainCaseDetail({ exampleId: route.query.id })
    .then((res) => {
      console.log("详情数据：", res);
      tags_info.value = res || {};
      if (tags_info.value.step) {
        console.log("步骤：", tags_info.value.step.split(","));
        let list = tags_info.value.step.split(",");
        step_list.value = list.map((item) => {
          return { value: item.trim() };
        });
      }
      code_info.value = res.code || "";
    })
    .finally(() => {
      loading.value = false;
    });
};
// 测试历史 的 操作 报告
const handleTicketsData = (item) => {
  console.log("item", item);
  dialogText.value = "用例日志";
  consoleLog.value = item.consoleLog;
  isShowDialog.value = true;
};
const handleDialogClose = () => {
  isShowDialog.value = false;
  consoleLog.value = null;
};

const handleTestDataName = (item) => {
  console.log("点击了数据", item);
  dialogText.value = "测试数据详情";
  consoleLog.value = item.dataInfo;
  isShowDialog.value = true;
};
const handleBack = () => {
  router.back();
};
</script>
<style scoped lang="scss">
.header_modal {
  align-items: center;
  cursor: pointer;
}
.title {
  margin-top: -6px;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 18px;
}
.icon {
  margin: -5px 5px 0 5px;
}
.tags_modal {
  background-color: #fff;
  height: 100%;
  padding: 20px;
  padding-left: 30px;
}
.tags_modal_info {
  .info_row {
    .info_item {
      flex: 1;
      align-items: center;
    }
  }
}
.grid_container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列等宽 */
  gap: 0 20px; /* 替代el-row的gutter */
  font-size: 14px;
  .full-row {
    grid-column: 1 / -1;
    margin-bottom: 20px;
  }
  .grid-item {
    /* 每个项目的样式 */
    margin-bottom: 20px;
  }
  .text_left {
    min-width: 120px;
    width: auto;
    padding-right: 10px;
    white-space: nowrap;
    text-align: right;
  }
}
.cursor_pointer {
  font-size: 12px;
}
.script_block {
  height: calc(100vh - 250px);
  overflow-y: scroll;
}
.dialog_main {
  width: 100%;
  height: calc(100vh - 300px);
}
.text_name {
  color: var(--el-color-primary);
  cursor: pointer;
}
</style>
